<template>
	<view>
		<view class="topcard" :style="{ 'background-image': 'url(' + bgimg + ')' }"></view>
		<view class="middle">
			<view class="title">
				<view class="title-left">
					服务介绍
				</view>
				<view class="title-right" style="margin-left: 20rpx;">
					Server
				</view>
			</view>
			<view class="describe">
				<text>{{serverInfo.title}}:{{serverInfo.content}}</text>
			</view>
		</view>
		<view class="tuijian" v-if="tuijianList != ''">
			<view class="title">
				<view class="title-left">
					相关推荐
				</view>
				<view class="title-right" style="margin-left: 20rpx;">
					Server
				</view>
			</view>
			<view class="content">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-for="item in tuijianList" :key="item.id" @click="goserver(item.id)">
						<view class="image">
							<image :src="item.Squareimage_text" mode=""></image>
						</view>
						<view class="name">
							{{item.title}}
						</view>
						<view class="free">
							<u-icon name="rmb"></u-icon>{{item.free}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="imageList">
			<view class="list-item" v-for="item,k in urlsList" :key="k">
				<image :src="item" mode=""></image>
			</view>
		</view>
		
		<view class="qita">
			<view class="title">
				<view class="title-left">
					其他推荐
				</view>
				<view class="title-right" style="margin-left: 20rpx;">
					Server
				</view>
			</view>
			<!-- <view class="content">
				<view class="content-detail">
				
				</view>
			</view> -->
			<view class="uni-product-list">
				<view class="uni-product" v-for="(item, index) in list" :key="index" @click="goserver(item.id)">
				  <view class="image-view">
					<image class="uni-product-image" :src="item.squareImage"></image>
				  </view>
				  <view class="uni-product-title">{{item.title }}</view>
				  <view class="uni-product-price">
					<text class="uni-product-price-original">￥{{ item.free }}</text>
					<!-- <text class="uni-product-price-original">{{item.price }}</text> -->
					<text class="uni-product-tip">优惠</text>
				  </view>
				</view>
			  </view>
		</view>
		<view class="flex">
			<view class="left">
				<u-icon name="rmb"></u-icon>{{free}}
			</view>
			<view class="right">
				<!-- <u-button type="primary" size="medium" @click="placeOrder()">立即下单</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: [],//用户数据
				id: 0,
				leveid: 0,
				stoid: 0,
				stoName: '',
				list:[],
				serverName: '',
				serverInfo: [],
				tuijianList: [],
				urlsList: [],
				serverList: [],
				bgimg: '',
				free: 0,
				zekou: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				loadStatus: 'loadmore',
				flowList: [],
			}
		},
		onLoad(options) {
			const item = JSON.parse(decodeURIComponent(options.item));
			this.id = item.serverId
			this.stoid = item.stoid
			this.userData = uni.getStorageSync('userData');
			this.getUserData()
			this.getinfo()
			this.getTuijianServer()
			this.getstoName()
			this.getQitaServer()
		},
	
		methods: {
		
			getQitaServer() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/Carpark/Carpark/getQitaServer',
					method: 'POST',
					data: {
						serverId: this.id,
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.list = res.data.data
					}
				});
			},
			goqitaserver(id) {
				let item = {
				    serverId: id,
					stoid: this.stoid,
				};
				uni.navigateTo({
					url: '/pagesB/server/serverDetail?item='+ encodeURIComponent(JSON.stringify(item))
				})
			},
			getstoName() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/Carpark/Carpark/getstoName',
					method: 'POST',
					data: {
						stoid: this.stoid,
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						 this.stoName = res.data.data
					}
				});
			},
			goserver(id) {
				let item = {
				    serverId: id,
					stoid: this.stoid,
				};
				uni.navigateTo({
					url: '/pagesB/server/serverDetail?item='+ encodeURIComponent(JSON.stringify(item))
				})
			},
			async getinfo()
			{
				let data={
					serverid: this.id,
						busid: this.userData.id
				}

				let result = await this.$u.api.carpark.info(data)
				if(result.code)
				{
					this.serverInfo = result.data
						this.serverName = result.data.title
						this.bgimg = result.data.Squareimage_text
						
						this.free = result.data.free
						this.urlsList = result.data.urlsList
				}

			},
		
			getTuijianServer() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/Carpark/Carpark/getTuijianServer',
					method: 'POST',
					data: {
						serverid: this.id,
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.tuijianList = res.data.data
					}
				});
			},
			getUserData() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/user/user/userData',
					method: 'POST',
					data: {
						busid: this.userData.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.userData = res.data.data.user
						this.leveid = res.data.data.user.leveid
						this.zekou = res.data.data.vip.zhekou
					}
				});
			},
			getzekou() {
				console.log(this.zekou)
				if(this.zekou != undefined) {
					const cost = this.free * this.zekou
					this.free = cost.toFixed(2)
				}
			},
			placeOrder() {
				let item = {
				    serverId: this.id,
					serverName: this.serverName,
					free: this.free,
					stoid: this.stoid,
					stoName: this.stoName
				};
				uni.navigateTo({
					url: '/pagesC/placeOrder/placeOrder?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}

.uni-product-list {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	flex-direction: row;
  }
  
  .uni-product {
	padding: 10upx;
	display: flex;
	flex-direction: column;
  }
  
  .image-view {
	height: 330upx;
	width: 330upx;
	margin: 12upx 0;
  }
  
  .uni-product-image {
	height: 330upx;
	width: 330upx;
  }
  
  .uni-product-title {
	width: 165px;
	word-break: break-all;
	display: -webkit-box;
	overflow: hidden;
	line-height: 1.5;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
  }
  
  .uni-product-price {
	margin-top: 10upx;
	font-size: 28upx;
	line-height: 1.5;
	position: relative;
  }
  
  .uni-product-price-original {
	color: #e80080;
  }
  
  .uni-product-price-favour {
	color: #888888;
	text-decoration: line-through;
  }
  
  .uni-product-tip {
	position: absolute;
	right: 10upx;
	background-color: #ff3333;
	color: #ffffff;
	padding: 0 10upx;
	font-size: 15px;
	border-radius: 5upx;
  }
.topcard {
	width: 95%;
	height: 650rpx;
	margin: 20rpx auto;
	border-radius: 20rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.middle {
	padding: 15rpx;
	.title {
		width: 100%;
		font-size: 21px;
		font-family: Helvetica;
		letter-spacing: 2px;
		display: flex;
		line-height: 30px;
		height: 30px;
	}
	.describe {
		width: 100%;
		margin-top: 40rpx;
		font-family: Helvetica;
		letter-spacing: 2px;
		text-indent: 4ch;
		padding: 10rpx;
	}
}
.tuijian {
	padding: 15rpx;
	.title {
		width: 100%;
		font-size: 21px;
		font-family: Helvetica;
		letter-spacing: 2px;
		display: flex;
		line-height: 30px;
		height: 30px;
	}
	.content {
		width: 100%;
		margin-top: 40rpx;
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			.scroll-view-item_H {
				display: inline-block;
				width: 40%;
				height: 370rpx;
				background-color: #fafafa;
				margin-left: 10px;
				border-radius: 15rpx;
				.image {
					width: 100%;
					height: 250rpx;
					image{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				.name {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #010101;
				}
				.free {
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #8a8a8a;
				}
			}
		}
	}
}
.qita {
	padding: 15rpx;
	.title {
		width: 100%;
		font-size: 21px;
		font-family: Helvetica;
		letter-spacing: 2px;
		display: flex;
		line-height: 30px;
		height: 30px;
	}
	.content {
		width: 100%;
		.content-detail {
			.demo-warter {
					border-radius: 8px;
					margin: 5px;
					background-color: #ffffff;
					padding: 8px;
					position: relative;
				}
				
				.u-close {
					position: absolute;
					top: 32rpx;
					right: 32rpx;
				}
				
				.demo-image {
					width: 100%;
					border-radius: 4px;
				}
				
				.demo-title {
					font-size: 30rpx;
					margin-top: 5px;
					color: $u-main-color;
				}
				
				.demo-tag {
					display: flex;
					margin-top: 5px;
				}
				
				.demo-tag-owner {
					color: #FFFFFF;
					display: flex;
					align-items: center;
					padding: 4rpx 14rpx;
					border-radius: 50rpx;
					font-size: 20rpx;
					line-height: 1;
				}
				
				.demo-tag-text {
					margin-left: 10px;
					border-radius: 50rpx;
					line-height: 1;
					padding: 4rpx 14rpx;
					display: flex;
					align-items: center;
					border-radius: 50rpx;
					font-size: 20rpx;
				}
				
				.demo-price {
					font-size: 30rpx;
					margin-top: 5px;
				}
				
				.demo-shop {
					font-size: 22rpx;
					color: $u-tips-color;
					margin-top: 5px;
				}
		}
	}
}
.imageList {
	width: 100%;
	margin-top: 40rpx;
	padding: 10rpx;
	.list-item {
		width: 100%;
		height: 400rpx;
		image {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
}
.flex {
	width: 90%;
	height: 90rpx;
	background-color: #fff;
	position: fixed;
	bottom: 80rpx;
	left: 0;
	right: 0;
	margin: 0 auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	border-radius: 15rpx;
	display: flex;
	.left {
		width: 50%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 20px;
		color: red;
		display: flex;
		margin-left: 20rpx;
	}
	.right {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.bold-text {
	font-weight: bold;
}
</style>
